<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
        .img-delete:before {
            position: absolute;
            top: -5px;
            color: red;
            margin-left: -15px;
            z-index: 999;
        }
        #app {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">标签管理</h1>
                <el-card class="box-card">
                    <div slot="header" class="clearfix" style="line-height: 36px">
                        <el-button type="primary" style="float: right" @click.native.prevent="getTagList">查询</el-button>
                    </div>
                   <el-form ref="search" :model="search" label-width="80px">
                       <el-form-item label="类型">
                           <el-select v-model="search.type" placeholder="请选择标签类型">
                               <el-option
                                       v-for="item in tagsArr"
                                       :label="item.name"
                                       :value="item.value">
                               </el-option>
                           </el-select>
                       </el-form-item>
                   </el-form>
                </el-card>
                <el-card class="box-card" style="margin-top: 10px">
                    <div slot="header" class="clearfix" v-if="isPermission('tag:add', user.permissions)">
                        <el-button type="primary" style="float: left;" @click.native="add">添加</el-button>
                    </div>
                    <el-table
                            :data="tagList"
                            border
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="序号"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="typeName"
                                label="标签类型">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="标签名称">
                        </el-table-column>
                        <el-table-column
                                prop="createrName"
                                label="创建人">
                        </el-table-column>
                        <el-table-column
                                prop="insertTime"
                                label="创建时间">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作"
                                inline-template>
                            <div style="margin-left: -10px">
                                <el-dropdown>
                                    <el-button size="small" type="primary">
                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown" align="center">
                                        <el-dropdown-item v-if="isPermission('tag:edit', user.permissions)"><el-button size="mini" type="primary" @click.native.prevent="editTag(row)">编辑</el-button></el-dropdown-item>
                                        <el-dropdown-item v-if="isPermission('tag:delete', user.permissions)"><el-button size="mini" type="primary" @click.native.prevent="confirmDeleteTag(row.id)">删除</el-button></el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @current-change="handleCurrentPageChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="totalCount"
                            style="margin-top:10px">
                    </el-pagination>
                </el-card>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>

    <el-dialog title="" v-model="addTagDialog">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="line-height: 36px" v-text="title">{{title}}</span>
            </div>
            <el-form :model="addTagForm" ref='addTagForm' :rules='addTagRules' :inline="true">
                <el-col :span="24">
                    <el-form-item prop="type" label="类型" >
                        <el-select v-model="addTagForm.type" placeholder="请选择标签类型" style="width:192px">
                            <el-option
                                    v-for="item in tagsArr"
                                    :label="item.name"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item  prop="name" label="名称">
                        <el-input v-model="addTagForm.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click.native.prevent="cancelBtn">取 消</el-button>
            <el-button type="primary" @click="saveAddTags" v-show=flag v-if="flag == true">保 存</el-button>
            <el-button type="primary" @click="saveEditTags" v-else>保存</el-button>
        </div>
    </el-dialog>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return {
                user: ${(user)!'null'},
                headerNavList: list.headerNavList,
                form: {
                    resource: 1,
                    desc: ''
                },
                accountNavList: list.accountNavList,
                leftMenuList: list.menu,
                search: {
                    type:''
                },
                tagList: [
                    {
                        typeName:'',
                        name:'',
                        createrName:'',
                        insertTime:''
                    }
                ],
                currentPage: list.currentPage,
                pageSize: list.pageSize,
                totalCount: 0,
                tagsArr:[],
                addTagDialog : false,
                addTagForm:{
                    type:'',
                    name:''
                },
                addTagRules:{
                    type:[
                        {required: true, message: "请选择标签类型", trigger: 'blur'}
                    ],
                    name:[
                        {required: true, message: "请输入标签名", trigger: 'blur'}
                    ]
                },
               isValid0:true,
                title:'',
                flag:false,
                tagId:''
            }
        },
        mounted:function () {
            this.getTags();
            this.getTagList();
        },
        methods: {
            handleCurrentPageChange(val) {
                this.currentPage = val;
                this.getTagList();
            },
            add () {
                this.addTagDialog = true;
                this.addTagForm.type = '';
                this.addTagForm.name = '';
                this.isValid0 = true;
                this.title = '添加标签';
                this.flag = true;
            },
            getTags(){
                let that = this;
                this.$get("/dictionary/list/MS_TAG_TYPE", {}, function (res) {
                    if (res.status === 100) {
                        that.tagsArr = res.returnValue;
                    } else {
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                }, function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            getTagList(){
                let that = this;
                let obj = {
                    type: this.search.type,
                   currentPage: this.currentPage,
                   pageSize: this.pageSize,
                   isAll:0
                }
                this.http('/tags/getTagList',obj,function (res) {
                    if(res.status == 200){
                        that.tagList = res.data.tagList;
                        that.totalCount = res.data.total;
                    }else{
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定'
                        })
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定'
                    })
                })
            },
            saveAddTags(){
                let that = this;
                if(this.addTagForm.type === '' || this.addTagForm.name === ''){
                    this.$refs.addTagForm.validate(function (valid) {
                        if(!valid){
                            that.$message.error('请完成未填项');
                            that.isValid0 = false;
                        }
                    })
                }
                this.http('/tags/addTag',{type:this.addTagForm.type,name:this.addTagForm.name },function (res) {
                    if(res.status == 200){
                        that.$alert('添加成功','提示',{
                            confirmButtonText:'确定'
                        })
                        that.getTagList();
                        that. addTagDialog  = false;
                    }else{
                        that. addTagDialog  = true;
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定'
                    })
                })
            },
            confirmDeleteTag(id){
                let that = this;
                this.$confirm('此操作将永久删除该项, 是否继续?', '提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(function () {
                   that.deleteTag(id)
                }).catch(function () {
                    that.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
            deleteTag (id) {
                let that = this;
                this.http('/tags/deleteTag',{id:id},function (res) {
                    if(res.status == 200){
                        that.getTagList();
                        that.$alert('删除成功','提示',{
                            confirmButtonText:'确定',
                        })
                    }else{
                        that.$alert('删除失败','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            editTag (row) {
                this.flag=false;
                let that = this;
                this.title = '标签编辑';
                this.tagId = row.id;
                that.addTagForm.type = row.type + "";
                that.addTagForm.name = row.name;
                this.addTagDialog = true;
           },
            saveEditTags(){
                let that = this;
                let obj = {}
                if(this.addTagForm.name === ''){
                    this.$refs.addTagForm.validate(function (valid) {
                    })
                    return false;
                }else {
                    this.addTagDialog = false;
                     obj = {
                        id:this.tagId ,
                        type: this.addTagForm.type,
                        name:this.addTagForm.name
                    }
                }
                this.http('/tags/editTag',obj,function (res) {
                    if(res.status == 200){
                        if(that.addTagForm.name !== ''){
                            that.getTagList();
                            that.$alert('编辑成功','提示',{
                                confirmButtonText:'确定',
                            })
                        }
                    }else{
                        that.$alert('编辑失败','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            cancelBtn(){
               this.addTagDialog = false;
                this.$refs.addTagForm.resetFields();
            }
        }
    })
</script>

<!-- 20170105 --></body>
</html>